<template>
  <el-container class="allbody" onscroll="false">
    <el-header style="height: 10.5%" class="headerbackgroud">
      <div
        style="
          color: white;
          font-size: 30px;
          text-align: center;
          margin-top: 20px;
          margin-left: 70px;
        "
      >
        典型工业设备和产品检测监测云服务平台
      </div>
      <el-card
        style="
          width: 150px;
          height: 50px;
          text-align: left;
          margin-left: 80px;
          margin-top: -30px;
          border-radius: 30px;
          background-color: #7d93ea;
        "
      >
        <div style="color: white; margin-left: 6px; margin-top: -10px">
          中国特种设备检测研究院
        </div>
      </el-card>
      <el-card
        style="
          width: 127px;
          height: 60px;
          align-items: right;
          margin-left: 1600px;
          margin-top: -30px;
          border-radius: 30px;
          background-color: #7d93ea;
        "
      >
        <div style="color: white; margin-left: 2px; margin-top: -8px">
          {{ dateFormat(date) }}
        </div>
      </el-card>
      <el-card
        style="
          width: 150px;
          height: 50px;
          align-items: right;
          margin-left: 1400px;
          margin-top: -60px;
          border-radius: 30px;
          background-color: #7d93ea;
        "
      >
        <div style="color: white; margin-left: 2px; margin-top: -8px">
          检测数据分析
        </div>
      </el-card>
    </el-header>
    <el-container style="height: 100%; width: 100%; z-index: 999">
      <el-aside style="height: 100%; width: 40%">
        <div
          style="border: #4cbde6 2px solid; border-radius: 10px"
          class="card-img"
        >
          <img
            style="margin-top: 0px; margin-left: 0px; width: 100%; height: auto"
            src="../../../../assets/image/zljc.png"
          />
          <div style="margin-left: 35%" class="card-img-inf">监测设备</div>
        </div>
      </el-aside>
      <el-main style="width: 60%">
        <el-container
          style="height: 90%; width: 90%; margin-left: 50px; margin-top: 50px"
        >
          <el-header style="height: 60%; width: 100%">
            <el-row style="width: 100%; height: 20%">
              <el-form
                :inline="true"
                class="demo-form-inline"
                style="margin-top: -40px; margin-left: 10px"
              >
                <el-form-item label="年份">
                  <el-select
                    v-model="location"
                    placeholder="请选择"
                    @change="yearChange"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="月份">
                  <el-select
                    v-model="city"
                    placeholder="请选择"
                    @change="monthChange"
                  >
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="日期">
                  <el-select
                    v-model="enterprises"
                    placeholder="请选择"
                    @change="dayChange"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button style="color: #009bfe" @click="show"
                    >查询</el-button
                  >
                </el-form-item>
              </el-form>
            </el-row>
            <el-row style="height: 80%; width: 100%">
              <el-container
                style="
                  height: 100%;
                  width: 100%;
                  border: 0px solid #4cbde6;
                  border-radius: 2px;
                "
              >
                <div style="height: 100%; width: 100%" v-if="indexx == 0">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 1">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 2">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 3">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 4">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 5">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 6">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 7">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 8">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 9">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
                <div style="height: 100%; width: 100%" v-if="indexx == 10">
                  <monitoring :indexOfValue="indexx" :key="indexx"></monitoring>
                </div>
              </el-container>
            </el-row>
          </el-header>

          <el-main style="height: 40%; width: 100%">
            <el-container
              style="
                height: 100%;
                width: 100%;
                border: 0px solid #4cbde6;
                border-radius: 2px;
              "
            >
              <el-table
                :data="tableData"
                border
                style="width: 100%; height: 650px"
                :row-style="getRowClass"
                :header-cell-style="{ background: '#101E44', color: '#606266' }"
                fit="true"
              >
                <el-table-column
                  fixed
                  prop="index"
                  label="序号"
                  width="200"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="名字"
                  width="500"
                ></el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row.index)"
                      type="text"
                      size="small"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-container>
          </el-main>
        </el-container>
      </el-main>
    </el-container>

    <div class="map1"><img src="../../../../assets/image/lbx.png" /></div>
    <div class="map2"><img src="../../../../assets/image/jt.png" /></div>
    <div class="map3"><img src="../../../../assets/image/map.png" /></div>
  </el-container>
</template>

<script>
import ElContainer from "element-ui/packages/container/src/main";
import ElAside from "element-ui/packages/aside/src/main";
import ElHeader from "element-ui/packages/header/src/main";
import ElMain from "element-ui/packages/main/src/main";
import strain from "./strain";
import monitoring from "./monitoring";
import temperature from "./temperature";

import { get, get as userType, del, dels } from "@/api/sys/connSysAuthApi";
import { parseTime } from "@/utils";
import { req } from "@/api/base/BaseApi";

export default {
  name: "index",
  components: { temperature, monitoring, strain },
  comments: {
    ElMain,
    ElHeader,
    ElAside,
    ElContainer,
    strain,
    monitoring,
    temperature,
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    tableRowStyle({ row, rowIndex }) {
      return "background-color: #02152f;color: #fff";
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #2ec7c9;color: #fff;font-weight: 500;";
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:#06134A;color:#72C22D;";
    },
    handleClick(row) {
      console.log(row);
      this.indexx = row - 1;
    },
    updateStrainChartAndTable() {
      this.toMonitoring = this.measurePoints;
      // 表格
      this.columns = [];
      this.columns.push({
        prop: "time",
        label: "时间",
      });
      for (let i = 0; i < this.measurePoints.length; i++) {
        this.columns.push({
          prop: this.measurePoints[i] + "value",
          label: this.measurePoints[i],
        });
      }
    },
    getTableDataFormSon(data) {
      const tableDataTemp = data;
      this.tableData = [];
      for (let j = 9; j >= 0; j--) {
        const tableDataI = {};
        for (let i = 0; i < this.measurePoints.length; i++) {
          const point = this.measurePoints[i];
          const values = tableDataTemp.get(point);
          const date = new Date(values[j].name);
          if (i <= 0) {
            tableDataI["time"] =
              date.getFullYear() +
              "/" +
              (date.getMonth() + 1) +
              "/" +
              date.getDate() +
              " " +
              date.getHours() +
              ":" +
              date.getMinutes() +
              ":" +
              date.getSeconds();
          }
          tableDataI[point + "value"] = values[j].value;
        }
        this.tableData.push(tableDataI);
      }
      this.currTableData = [];
      for (let i = 0; i < this.measurePoints.length; i++) {
        const point = this.measurePoints[i];
        const values = tableDataTemp.get(point);
        const date = new Date(values[values.length - 1].name);
        this.currTableData.push({
          point: point,
          data: values[values.length - 1].value,
          time:
            date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(),
        });
      }
    },
  },
  data() {
    return {
      indexx: ["4"],
      tableData: [
        {
          index: "1",
          name: "副主梁与端梁连接上盖板（西）",
        },
        {
          index: "2",
          name: "副主梁连接上盖板（西）",
        },
        {
          index: "3",
          name: "主梁端部变截面连接焊缝",
        },
        {
          index: "4",
          name: "北侧主梁下盖板1/4 跨",
        },
        {
          index: "5",
          name: "北侧主梁下盖板1/2 跨",
        },
        {
          index: "6",
          name: "北侧主梁下盖板1/4 跨",
        },
        {
          index: "7",
          name: "副主梁连接上盖板（东)",
        },
        {
          index: "8",
          name: "副主梁与端梁连接上盖板（东）",
        },
        {
          index: "9",
          name: "北侧主梁主腹板1/4 跨（西）",
        },
        {
          index: "10",
          name: "北侧主梁主腹板1/2 跨",
        },
        {
          index: "11",
          name: "北侧主梁主腹板1/4 跨（东）",
        },
      ],
      date: new Date(),
    };
  },
  filters: {
    userTypeFilter(type) {
      let typeText = type;
      userTypes.forEach((val) => {
        if (type === val.value) {
          typeText = val.name;
        }
      });
      return typeText;
    },
    menuFilter(ids) {
      let length = 0;
      if (ids) {
        length = ids.length;
      }
      return length;
    },
    dateTimeFilter(time) {
      return parseTime(time);
    },
  },
  mounted() {
    this.updateVibrationChartAndTable();
    let _this = this; //声明一个变量指向vue实例this,保证作用域一致
    (this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据date
    }, 1000)),
      console.log(this.$route.path); // 输出当前页面的路由，如：/home
  },
};
</script>

<style lang="less" scoped>
.headerbackgroud {
  background-image: url("../../../../assets/screen-header.jpg");
}
.allbody {
  width: 1850px;
  height: 1050px;
  background-image: url("../../../../assets/bg.jpg");
}
.rowclass {
  width: 100%;
  height: 50%;
}
#text {
  -webkit-text-fill-color: white;
}
.select {
  color: white;
}
.hello {
  // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  //修改的是el-input的样式
  //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
  //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: #08164d;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: center;
  }
}
.map1,
.map2,
.map3 {
  position: absolute;
  opacity: 0.5;
}
.map1 {
  margin-left: 580px;
  margin-top: 230px;
  z-index: 2;
  animation: myfirst2 15s infinite linear;
}
.map2 {
  margin-left: 625px;
  margin-top: 275px;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}
.map3 {
  margin-left: 650px;
  margin-top: 300px;
  z-index: 1;
}
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
.card-img {
  position: relative;
  height: 550px;
  width: 90%;
  margin-top: 150px;
  margin-left: 35px;
  float: left;
  border-color: #4ab7bd;
  border: 6px;
  border-radius: 10px;
  justify-content: center;

  .card-img-inf {
    margin-top: 10px;
    font-size: 40px;
    color: #4ab7bd;
  }
}
</style>
